<script setup lang="ts">
// 组件封装的思路： 是否基于element-ui里面的组件 或vant中的组件进行二次 还是直接自定义封装
//  - 结构和样式----》 插槽---》 需要用到组件内部的数据--》作用域 | 具名插槽
//        -是否需要展示 总的页码值， 上一页 当前页码只 下一页  跳转第几页  每页显示的条数
//  - 数据不同-----》 定义属性--》 外部通过父传子 传到组件内部
//      -   总的条数    每页显示的条数     总的页面值：  总的条数 / 每页显示的条数
//  - 功能不同=====》  定义事件 ----》 子组件通过emit向外暴露事件  父组件可以自定义事件， 完成不同的需求
//   -  点击页码值 进行页面的跳转     点击每页显示的条数： 进行每页显示条数的切换，  跳转到第几页 绑定事件实现页面的跳转
defineProps<{
  options: {
    label: string
    value: number
  }[]
  modelValue: number
}>()

const emit = defineEmits<{
  (event: 'update:modelValue', gender: number): void
}>()
</script>

<template>
  <div class="cp-radio-btn">
    <a
      class="item"
      :class="{ active: modelValue === item.value }"
      v-for="item in options"
      :key="item.value"
      href="javascript:;"
      @click="emit('update:modelValue', item.value)"
      >{{ item.label }}</a
    >
  </div>
</template>

<style lang="scss" scoped>
.cp-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--cp-bg);
    background-color: var(--cp-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--cp-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
